<template>
    <el-card>
        <el-table border :data="roles">
            <el-table-column label="序号" type="index" width="60px"></el-table-column>
            <el-table-column label="权限名称" prop="authName"></el-table-column>
            <el-table-column label="权限路径" prop="path"></el-table-column>
            <el-table-column label="权限等级">
                <template #default="{ row }">
                    <el-tag :type="tag[row.level]['type']" effect="dark" size="mini">{{ tag[row.level]['label'] }}</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            tag:[
                { type: 'primary', label: '一级' },
                { type: 'success', label: '二级' },
                { type: 'warning', label: '三级' }
            ],
            roles:[]
        }
    },
    methods:{
        async findRightsList(){
            let roles = await this.$api.loadRights();
            this.roles = roles.sort((a,b)=> a.level-b.level);
        }
    },
    created(){
        this.findRightsList();
    }
};
</script>

<style lang="less" scoped>
.search-bar {
    margin-bottom: 20px;
    .el-input {
        width: 500px;
        margin-right: 30px;
    }
}
.el-pagination{
    margin-top: 20px;
}
</style>